<template>
    <div class="banxin goods">
        <!--  面包屑 -->
        <div class="banxin">
            <img src="../assets/images/products/banner.png" alt="">
        </div>
        <div class="banxin  list" @click.stop="hdClick3">
            <div>
                <ul class="tanxin">
                    <li><label>排序:</label></li>
                    <li v-for="item, index in duihuan" :key="item.title" @click.stop="hdClick(index, item.min, item.max)"
                        :class="{ active: addClass === index }">{{ item.title }}</li>
                </ul>
            </div>
            <div>

                <ul class="tanxin">
                    <li><label>分类:</label></li>
                    <li v-for="item, index in fenlei" :key="item.title" @click.stop="hdClick2(index, item.type)"
                        :class="{ active: addClass2 === index }">{{ item.title }}</li>
                </ul>
            </div>
        </div>

        <Product :AllInfo="AllspInfo" />
    </div>
</template>

<script>
import Product from "@/components/Product.vue"
import { GoodsApi } from "../request/api"
export default {
    data() {
        return {
            did: 0,
            type: 0,
            min: 0,
            max: 0,
            keyword: "",
            addClass: 0,
            addClass2: 0,
            AllspInfo: [],
            duihuan: [
                {
                    title: '全部', max: 20000, min: 0
                },
                {
                    title: '我能兑换的', max: 20000, min: 0
                },
                {
                    title: '0-500分', max: 500, min: 0
                },
                {
                    title: '500-1000分', max: 1000, min: 500
                },
                {
                    title: '1000分-1500分', max: 1500, min: 1000
                },
                {
                    title: '1500分-2500分', max: 2500, min: 1500
                },
                {
                    title: '2500分-6500分', max: 6500, min: 2500
                },
                {
                    title: '6500分-10000分', max: 10000, min: 6500
                },
                {
                    title: '10000分-20000分', max: 20000, min: 10000
                },
            ],
            fenlei: [
                {
                    title: '全部', type: 0
                },
                {
                    title: '实物商品', type: 1
                },
                {
                    title: '虚拟商品', type: 2
                }
            ],
        }
    },
    watch: {
        '$route.query.keyword': {
            handler(newVal, oldVal) {
                this.keyword = newVal || ''
                this.goodsSerch()
            }
        }
    }
    ,
    methods: {
        hdClick(ind, min, max) {
            this.addClass = ind
            // 更新min max
            this.min = min
            this.max = max
            this.goodsSerch()

        },
        hdClick2(ind, type) {
            this.addClass2 = ind
            this.type = type
            this.goodsSerch()
        },
        async goodsSerch() {
            let res = await GoodsApi({
                did: this.did,
                type: this.type,
                min: this.min,
                max: this.max,
                keyword: this.keyword
            })
            if (!res) {
                return
            }
            this.AllspInfo = res.data.data
            console.log(res);
        }
    }
    ,
    created() {
        this.keyword = this.$route.query.keyword || ''
        this.goodsSerch()
    },
    components: {
        Product
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.goods {
    .shou {
        a {
            text-decoration: none;
        }
    }

    .list {
        padding: 40px 0 10px;
        flex-wrap: wrap;

        div {
            ul {
                margin-bottom: 32px;
                justify-content: left;

                li {

                    color: #999;
                    cursor: pointer;
                    margin-right: 26px;

                    label {
                        font-weight: bold;
                        color: #000;
                        // margin-right: 10px;
                    }

                    &.active {
                        color: @blue;
                        font-weight: bold;
                    }

                    &:nth-last-of-type {
                        margin-right: 0;
                    }
                }
            }
        }

    }
}
</style>